<template>
    <w-container class='wall page-bg plr-16' :loading="loading">
        <w-navbar id="my-nav" :title="title"></w-navbar>
		<view class="bg-color-item br-16 ptb-12 plr-16">
			<view class="flex flex-ai-center">
			    <u-avatar size='32' :src="$ossUrl + info.profile.avatar"></u-avatar>
			    <view class="pl-8 flex flex-dir-col flex-js-sb">
			        <text class="font-color-white font-size-14">{{ info.profile.nickname}}</text>
			        <text class="font-size-8 font-color-minor">{{ info.create_time }}</text>
			    </view>
			</view>
			<view class="pt-12 font-size-14 font-color-999">
			    {{ info.content&&handleLang(info.content) }}
			</view>
			<view class="flex mt-4" v-if="info.images">
			    <template v-if='images.length == 1'>
			        <w-image v-for="(img, index) in images" @click.native='preview(img)' :key="index" :src='img' width="343" height="257"
			            mode="top"></w-image>
			    </template>
			    <template v-else-if="images.length == 2">
			        <w-image v-for="(img, index) in images"  @click.native='preview(img)' :key="index" :src='img' width="171" height="171"  mode="top"></w-image>
			    </template>
			    <template v-else-if="images.length == 3">
			        <w-image v-for="(img, index) in images"  @click.native='preview(img)' :key="index" :src='img' width="115" height="115"  mode="top"></w-image>
			    </template>
			</view>
		</view>
        <Comment ref="comment" :rumorId="info.id"></Comment>
    </w-container>
</template>


<script>
import { getRumorDetails } from '@/api/notice'
import Comment from './components/comment'
export default {
    components: {
        Comment
    },
    data() {
        return {
            title: "辟谣详情",
            info: {
                profile: {
                }
            },
            loading: false
        }
    },
    computed: {
        images() {
            if (this.info.images) return this.info.images.split(',')
            return []
        }
    },
    onLoad({ id }) {
        this.getRumorDetails(id)
    },
	onReachBottom() {
		this.$refs.comment.loadMore()
	},
    methods: {
        getRumorDetails(id) {
            this.loading = true
            getRumorDetails(id).then(res => {
                this.info = res.data
            }).finally(() => {
                this.loading = false
            })
        },
		preview(img){
			uni.previewImage({
				urls:this.images.map(v=>this.$ossUrl+v),
				current:this.$ossUrl+img
			})
		}
    }
}

</script>

<style lang="scss">
.wall {
   padding-bottom: calc(128rpx + env(safe-area-inset-bottom));
}
</style>